<template>
  <el-row :gutter="10">
    <el-col :span="6">
      <el-card>
        <el-input
          style="width: 80%"
          placeholder="请输入关键词"
          v-model="filterText"
        >
          <template #append>
            <el-button icon="Search"></el-button>
          </template>
        </el-input>
        <el-tree
          @node-click="handleNodeClick"
          ref="treeRef"
          :filter-node-method="filterNode"
          class="mt"
          :data="dataList"
          style="max-width: 600px"
          :props="defaultProps"
        >
        </el-tree>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card>
        <template #header>
          <div class="card-header">
            <h3>{{ title }}计费模板</h3>
          </div>
        </template>
        <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="模板名称" prop="name">
            <el-input
              :disabled="!title"
              v-model="formData.name"
              placeholder="请输入模板名称"
              style="max-width: 180px"
            />
          </el-form-item>
          <el-form-item
            :label="`时间区间${index + 1}`"
            v-for="(item, index) in formData.date"
            :key="index"
          >
            <el-col :span="8">
              <el-form-item
              
                label="开始时间"
                :prop="`date.${index}.date1`"
                :rules="{
                  required: true,
                  message: '请选择开始时间',
                  trigger: 'blur',
                }"
              >
                <el-time-picker
                :disabled="!title"
                  placeholder="选择开始时间"
                  v-model="item.date1"
                  style="width: 90%"
                  value-format="HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <span>--</span>
            </el-col>
            <el-col :span="8"
              ><el-form-item
               
                label="结束时间"
                :prop="`date.${index}.date2`"
                :rules="{
                  required: true,
                  message: '请选择结束时间',
                  trigger: 'blur',
                }"
              >
                <el-time-picker
                 :disabled="!title"
                  value-format="HH:mm:ss"
                  placeholder="选择结束时间"
                  v-model="item.date2"
                  style="width: 90%"
                /> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item
               
                label="电费"
                :prop="`date.${index}.electric`"
                :rules="{
                  required: true,
                  message: '请输入电费',
                  trigger: 'blur',
                }"
              >
                <el-input
                 :disabled="!title"
                  placeholder="请输入电费"
                  v-model="item.electric"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-form-item>

          <el-button type="primary" class="mb mt" @click="addDate"
            >添加时间区间</el-button
          >
          <el-form-item label="服务费" prop="service" >
            <el-input
            :disabled="!title"
              v-model="formData.service"
              placeholder="请输入服务费"
              style="max-width: 180px"
            />
          </el-form-item>
          <el-form-item label="停车费" prop="parking" >
            <el-input
            :disabled="!title"
              v-model="formData.parking"
              placeholder="请输入停车费"
              style="max-width: 180px"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remarks" >
            <el-input
            :disabled="!title"
              v-model="formData.remarks"
              type="textarea"
              placeholder="请输入备注"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="mb mt" @click="create"
              >创建</el-button
            >
            <el-button class="mb mt" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { cityList } from '@/api/operations';
interface tree {
  label: string;
  children: tree[];
}

interface Tree {
  [key: string]: any;
}

interface Form {
  name: string;
  service: string;
  parking: string;
  remarks: string;
  date: Array<{ date1: string; date2: string; electric: string }>;
}
const filterText = ref('');
const defaultProps = {
  children: 'children',
  label: 'label',
};
const dataList = ref<tree[]>([]);
const treeRef = ref();
const title = ref('');
const formRef = ref();

const getData = async () => {
  const res = await cityList();
  dataList.value = res.data;
};
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
onMounted(() => {
  getData();
});

const rules = reactive({
  name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  service: [{ required: true, message: '请输入服务费', trigger: 'blur' }],
  parking: [{ required: true, message: '请输入停车费', trigger: 'blur' }],
  remarks: [{ required: true, message: '请输入备注', trigger: 'blur' }],
});
const formData = ref<Form>({
  name: '',
  service: '',
  parking: '',
  remarks: '',
  date: [
    {
      date1: '',
      date2: '',
      electric: '',
    },
  ],
});
const addDate = () => {
  formData.value.date.push({
    date1: '',
    date2: '',
    electric: '',
  });
};
const create = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log(formData.value);
    }
  });
};
const handleNodeClick = (data: tree) => {
  if (!data.children) {
    reset();
    title.value = data.label;
    formData.value.name = data.label;
  }
};
const reset = () => {
  formRef.value.resetFields();
};
</script>
<style lang="less" scoped></style>
